// 媒体查询
// --------------------------------------------------
$breakpoints: (
        'clientPlus': 'only screen and ( min-width: 1100px)',
        'pcMin': 'only screen and ( min-width: 1200px)',
        'pc': 'only screen and ( max-width: 1200px)',
        'padP': 'only screen and ( max-width: 1024px)',
        'client': 'only screen and ( max-width: 980px)',
        'pad': 'only screen and ( max-width: 768px)',
        'phone': 'only screen and ( max-width: 414px)',
        'md': 'only screen and ( min-width: 960px)',
        'lg': 'only screen and ( min-width: 1400px)',
) !default;


@mixin respond-to($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);

  @if not $query {
    @media only screen and ( min-width: #{$breakpoint}) {
      @content;
    }
    //@error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
  }
  @else {
    @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
      @content;
    }
  }
}

@mixin center{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

@mixin text-over {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin ellipsis-line($colamp:2){
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $colamp;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

@mixin border($color,$size:1px){
  border: $size solid $color;
}
@mixin absolute($top:0,$left:0){
  position: absolute;
  top: $top;
  left: $left;
}

@mixin flh($h:30px){
  font-size: $h;
  height: $h;
  line-height: $h;
}

@mixin l-h($h:30px){
  height: $h;
  line-height: $h;
}

// btn-size
@mixin btn-size($width:nth($btnNormalSize,1), $height:nth($btnNormalSize,2), $fontSize:nth($btnNormalSize,3), $formbtn: false){
  width:$width;
  font-size:$fontSize;
  @if $formbtn{
    // form元素按钮（如button,input:submit），设置height来反应其高度
    height: $height;
  } @else {
    // 普通按钮，通过设置line-height来反应其高度
    line-height: $height;
  }
}

//按钮
@mixin btn($width,$height,$radius:0px){
  width: $width;
  height: $height;
  text-align: center;
  line-height: $height;
  border-radius: $radius;
  cursor: pointer;
  &.disabled{
    opacity: .3;
  }
}

@mixin btn-blue($width:120px, $height:32px,$radius:0px) {
  @include btn($width,$height,$radius);
  color: $T4;
  background: $B1;
  &:hover{
    opacity: .9;
  }
  &:active{
    opacity: .8;
  }
}
@mixin btn-green($width:120px, $height:32px,$radius:0px) {
  @include btn($width,$height,$radius);
  color: $T4;
  background: $B2;
  &:hover{
    opacity: .9;
  }
  &:active{
    opacity: .8;
  }
}
@mixin btn-gray($width:120px, $height:32px,$radius:0px) {
  @include btn($width,$height,$radius);
  color: $T3;
  background: $T1;
  &:hover{
    color: $T4;
  }
  &:active{
    opacity: .8;
  }
}
@mixin btn-red($width:120px, $height:32px,$radius:0px) {
  @include btn($width,$height,$radius);
  color: $T4;
  background: $B5;
  &:hover{
    opacity: .9;
  }
  &:active{
    opacity: .8;
  }
}


@mixin img-avtar-center($width){
  width: $width;
  height:$width;
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  img{
    @include center;
  }
}
@mixin circle($width){
  width: $width;
  height: $width;
  border-radius: 50%;
  overflow: hidden;
}
// flex布局
// 水平
@mixin hor {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
// 水平居中
@mixin hor-center {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
// 垂直居中
@mixin ver-center {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
// 子元素内联垂直居中
@mixin center-center {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
@mixin center-column{
  display: flex;
  flex-direction: column;
  align-items: center;
}
// 子元素块联水平垂直居中
@mixin center-center-column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
@mixin space-between {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@mixin space-between-column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@mixin space-around {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

@mixin text-over {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin full {
  width: 100%;
  height: 100%;
}
// 鼠标2态
@mixin mouse2($url){
  background: url($url) no-repeat;
  &:hover{
    background: url(str-slice($url, 0, -5)+'_on'+str-slice($url, -4)) no-repeat;
  }
}

// 鼠标3态
@mixin mouse3($url){
  background: url($url) no-repeat;
  &:hover{
    background: url(str-slice($url, 0, -5)+'_on'+str-slice($url, -4)) no-repeat;
  }
  &:active{
    background: url(str-slice($url, 0, -5)+'_active'+str-slice($url, -4)) no-repeat;
  }
}

@mixin ripple-up(){
  position: relative;
  z-index: 2;
}